<template>
  <AppBar sourcePath="/index/mine" title="设置主题色"></AppBar>
  <div class="system-wrapper">
    <div class="color-box" :style="{backgroundColor:colorRef}">
      <div id="picker">
      </div>
    </div>
    <var-button block type="primary" class="btn" @click="handleSaveSystemColor"
      >块级按钮</var-button
    >
  </div>
</template>
<script setup name="SetSystemColor">
import { ref, toRef, inject, onMounted } from 'vue';
import useSymbols from '../../compostions/useSymbols.js';
import iro from '@jaames/iro';

const { systemColorReadonly, setSystemColor, initSystem } = inject(useSymbols);

const colorRef = ref(toRef(systemColorReadonly.value.color));

// 保存颜色
const handleSaveSystemColor = () => {
  setSystemColor(colorRef.value);
  initSystem('.app');
};

// 颜色被改变时候的回调
const changeColor = (color) => {
    colorRef.value = color.hexString;
}

onMounted(() => {
    const colorPicker = new iro.ColorPicker('#picker', {
        //设置颜色选择器的大小
        width: 320,
        //将初始颜色设置为纯红色
        color: systemColorReadonly.value.color
    });
    colorPicker.on('color:change', changeColor);
});
</script>
<style scoped lang="less">
.system-wrapper {
    width: 100%;
    padding: 0 .5rem;
    box-sizing: border-box;
  .color-box {
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    border-radius: 2rem;
    padding: 3rem 1rem;
    margin-bottom: 5rem;
    margin-top: 1rem;
    display: flex;
    justify-content: center;

  }
  .btn{
        background-color: var(--system-primary-color);
    }
}
</style>
